<!--
 * @Description:
 * @Author: william
 * @Date: 2025-03-17 18:59:08
 * @LastEditors: william
 * @LastEditTime: 2025-07-22 19:41:05
-->
<template>
  <div class="customerWrap">
    <el-select v-model="id" :placeholder="getPlaceholder()" :="$attrs">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div v-if="type === 'add'" class="add-customer">
      <el-button text type="primary" @click="handleAddCustomer">{{
        $t('public.add')
      }}</el-button>
    </div>
    <AddCustomer
      v-if="AddCustomerVisible"
      v-model="AddCustomerVisible"
      @update="getOptions()"
    />
  </div>
</template>

<script setup>
import AddCustomer from '@/views/customer/component/AddOrEditDialog.vue'

const props = defineProps({
  type: {
    type: String,
    default: '' // add
  },
  placeholder: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  }
})

const id = defineModel({
  type: String,
  default: ''
})
const optionLabel = defineModel('label', {
  type: String,
  default: ''
})
const options = defineModel('list', {
  type: Array,
  default: () => []
})
const AddCustomerVisible = ref(false)

watch(
  [() => id.value, () => options.value],
  nv => {
    optionLabel.value = options.value.find(item => item.value === nv[0])?.label
  },
  {
    deep: true
  }
)

onMounted(() => {
  getOptions()
})

// 查询下拉列表
const getOptions = () => {
  g_api.customer.apiCustomerDropList().then(({ code, data }) => {
    if (code === '200' && data) {
      options.value = data
    }
  })
}

const getPlaceholder = _ => {
  return (
    props.placeholder ||
    g_rules.zhAndEnShowMsg(g_t('public.pleaseSelect'), props.label)
  )
}

const handleAddCustomer = _ => {
  AddCustomerVisible.value = true
}
</script>

<style scoped lang="scss">
.customerWrap {
  flex: 1;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: top;
  .add-customer {
    margin-left: 10px;
  }
}
</style>
